<template>
  <div>
    <li v-for="(item,index) in workTime" v-bind:key="index" class="mb">
      <div>
        <span class="mm">上班{{index + 1}}时间</span>
        <el-time-picker @change="change(item.start,index, 'sign')" v-model="item.start" format="HH:mm"
          :clearable="false" value-format="HH:mm" :picker-options="{
      format: 'HH:mm'
    }" placeholder="上班1时间"></el-time-picker>

        <span v-if="item.sign_day_status == 1" class="day1">次日</span>
        <span v-else class="day2">当日</span>

        <!-- 打卡范围 -->
        <span class="mm">上班{{index + 1}}打卡时间段</span>


        <el-time-picker @focus="focusRange" @change="changeRange(item.start, index, 'sign_start')"
          v-model="item.sign_startime" format="HH:mm" value-format="HH:mm" :picker-options="{
      format: 'HH:mm',
      selectableRange: item.sign_startime_range
    }" placeholder="未设置">
        </el-time-picker>

        <span v-if="item.sign_startime">
          <span v-if="item.sign_start_range_day_starus == 1" class="day1">次日</span>
          <span v-else-if="item.sign_start_range_day_starus == 2" class="day1">昨日</span>
          <span v-else-if="item.sign_start_range_day_starus == 3" class="day1">次次日</span>
        </span>

        <span>至</span>


        <el-time-picker @focus="focusRange" @change="changeRange(item.start, index, 'sign_end')"
          v-model="item.sign_endtime" format="HH:mm" value-format="HH:mm" :picker-options="{
      format: 'HH:mm',
      selectableRange: item.sign_endtime_range
    }" placeholder="未设置"></el-time-picker>


        <span v-if="item.sign_endtime">
          <span v-if="item.sign_end_range_day_starus == 1" class="day1">次日</span>
          <span v-else-if="item.sign_end_range_day_starus == 2" class="day1">昨日</span>
          <span v-else-if="item.sign_end_range_day_starus == 3" class="day1">次次日</span>
        </span>

      </div>
      <!-- 上下班分割线 -->
      <div>
        <span class="mm">下班{{index + 1}}时间</span>


        <el-time-picker @change="change(item.end, index, 'outsign')" v-model="item.end" format="HH:mm"
          value-format="HH:mm" :clearable="false" :picker-options="{
      format: 'HH:mm'
    }" placeholder="下班1时间"></el-time-picker>

        <span v-if="item.outsign_day_status == 1" class="day1">次日</span>
        <span v-else class="day2">当日</span>

        <!-- 打卡范围 -->
        <span class="mm">下班{{index + 1}}打卡时间段</span>


        <el-time-picker @focus="focusRange" @change="changeRange(item.end, index, 'outsign_start')"
          v-model="item.outsign_startime" format="HH:mm" value-format="HH:mm" :picker-options="{
      format: 'HH:mm',
      selectableRange: item.outsign_startime_range
    }" placeholder="未设置"></el-time-picker>


        <span v-if="item.outsign_startime">
          <span v-if="item.outsign_start_range_day_starus == 1" class="day1">次日</span>
          <span v-else-if="item.outsign_start_range_day_starus == 2" class="day1">昨日</span>
          <span v-else-if="item.outsign_start_range_day_starus == 3" class="day1">次次日</span>
        </span>

        <span>至</span>


        <el-time-picker @focus="focusRange" @change="changeRange(item.end, index, 'outsign_end')"
          v-model="item.outsign_endtime" format="HH:mm" value-format="HH:mm" :picker-options="{
      format: 'HH:mm',
      selectableRange: item.outsign_endtime_range
    }" placeholder="未设置"></el-time-picker>


        <span v-if="item.outsign_endtime">
          <span v-if="item.outsign_end_range_day_starus == 1" class="day1">次日</span>
          <span v-else-if="item.outsign_end_range_day_starus == 2" class="day1">昨日</span>
          <span v-else-if="item.outsign_end_range_day_starus == 3" class="day1">次次日</span>
        </span>

      </div>
    </li>
    <el-button type="primary" @click="send">主要按钮</el-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        workTime: [{
            start: "9:00",
            sign_startime: "",
            sign_endtime: "",
            sign_startime_range: "",
            sign_endtime_range: "",
            sign_day_status: 0,
            sign_start_range_day_starus: 0,
            sign_end_range_day_starus: 0,
            end: "11:00",
            outsign_startime: "",
            outsign_endtime: "",
            outsign_startime_range: "",
            outsign_endtime_range: "",
            outsign_day_status: 0,
            outsign_start_range_day_starus: 0,
            outsign_end_range_day_starus: 0,
          },
          {
            start: "12:00",
            sign_startime: "",
            sign_endtime: "",
            sign_startime_range: "",
            sign_endtime_range: "",
            sign_day_status: 0,
            sign_start_range_day_starus: 0,
            sign_end_range_day_starus: 0,
            end: "13:00",
            outsign_startime: "",
            outsign_endtime: "",
            outsign_startime_range: "",
            outsign_endtime_range: "",
            outsign_day_status: 0,
            outsign_start_range_day_starus: 0,
            outsign_end_range_day_starus: 0,
          },
          {
            start: "16:00",
            sign_startime: "",
            sign_endtime: "",
            sign_startime_range: "",
            sign_endtime_range: "",
            sign_day_status: 0,
            sign_start_range_day_starus: 0,
            sign_end_range_day_starus: 0,
            end: "18:00",
            outsign_startime: "",
            outsign_endtime: "",
            outsign_startime_range: "",
            outsign_endtime_range: "",
            outsign_day_status: 0,
            outsign_start_range_day_starus: 0,
            outsign_end_range_day_starus: 0,
          }
        ],
        commont: ['当日', '次日', '昨日', '次次日'],
      };
    },
    methods: {
      /** */
      change(events, index, type) {
        for (let i = 0; i < this.workTime.length; i++) {
          if (this.toDateTime(this.workTime[i].end) == this.toDateTime(this.workTime[i].start)) {
            console.log("上班" + (i + 1) + "时间不能等于下班" + (i + 1) + "时间");
            this.$message.error(
              "上班" + (i + 1) + "时间不能等于下班" + (i + 1) + "时间"
            );
            return;
          }

          if (i > 0 && this.toDateTime(this.workTime[i].start) == this.toDateTime(this.workTime[i - 1].end)) {
            console.log("上班" + (i + 1) + "时间不能等于下班" + i + "时间");
            this.$message.error(
              "上班" + (i + 1) + "时间不能等于下班" + i + "时间"
            );
            return;
          }

          if (i > 0 && i + 1 != this.workTime.length && this.toDateTime(this.workTime[i].end) == this.toDateTime(this
              .workTime[
                i + 1].start)) {
            console.log("上班" + (i + 2) + "时间不能等于下班" + (i + 1) + "时间");
            this.$message.error(
              "上班" + (i + 2) + "时间不能等于下班" + (i + 1) + "时间"
            );
            return;
          }

          if (this.toDateTime(this.workTime[i].start) > this.toDateTime(this.workTime[i].end)) {
            this.workTime[i].outsign_day_status = 1;
            this.workTime[i].outsign_start_range_day_starus = 1;
            this.workTime[i].outsign_end_range_day_starus = 1;
          } else if (i > 0 && this.toDateTime(this.workTime[i].start) < this.toDateTime(this.workTime[i - 1].end)) {
            this.workTime[i].sign_day_status = 1;
            this.workTime[i].sign_start_range_day_starus = 1;
            this.workTime[i].sign_end_range_day_starus = 1;
          } else {
            this.workTime[i].outsign_day_status = 0;
            this.workTime[i].sign_day_status = 0;
            this.workTime[i].sign_start_range_day_starus = 0;
            this.workTime[i].sign_end_range_day_starus = 0;
            this.workTime[i].outsign_start_range_day_starus = 0;
            this.workTime[i].outsign_end_range_day_starus = 0;
          }

          if (i > 0 && (this.workTime[i].sign_day_status == 1 || this.workTime[i - 1].outsign_day_status == 1)) {
            this.workTime[i].outsign_day_status = 1;
            this.workTime[i].sign_day_status = 1;
            this.workTime[i].sign_start_range_day_starus = 1;
            this.workTime[i].sign_end_range_day_starus = 1;
            this.workTime[i].outsign_start_range_day_starus = 1;
            this.workTime[i].outsign_end_range_day_starus = 1;
          }

          //如果上下班时间都是次日，那下班时间不能<=上班时间
          if (i > 0 && this.workTime[i - 1].outsign_day_status == 1 && this.toDateTime(this.workTime[i - 1].end) > this
            .toDateTime(
              this.workTime[i].start)) {
            console.log("请按时间顺序设置时间点");
            this.$message.error("上班" + (i + 1) + "时间不能小于下班" + (i) + "时间");
            return;
          }
          //如果上下班时间都是次日，那下班时间不能<=上班时间
          if (this.workTime[i].sign_day_status == 1 && this.toDateTime(this.workTime[i].end) < this.toDateTime(this
              .workTime[i].start)) {
            console.log("请按时间顺序设置时间点");
            this.$message.error("上班" + (i + 1) + "时间不能大于下班" + (i + 1) + "时间");
            return;
          }

          if (i == index) {
            if (type != "outsign") {
              this.workTime[i].sign_startime = "";
              this.workTime[i].sign_endtime = "";
              this.workTime[i].sign_startime_range = "";
              this.workTime[i].sign_endtime_range = "";
            }
            this.workTime[i].outsign_startime = "";
            this.workTime[i].outsign_endtime = "";
            this.workTime[i].outsign_startime_range = "";
            this.workTime[i].outsign_endtime_range = "";
          }
        }
      },
      focusRange(event) {
        let workTimeCount = this.workTime.length;
        for (var i = 0; i < this.workTime.length; i++) {
          let time = this.workTime[i];
          let dayStart = "00:00:00";
          let dayEnd = "23:59:59";
          let lStart_1 = dayStart;
          let lStart_2 = dayEnd;
          let lEnd_1 = dayStart;
          let lEnd_2 = dayEnd;
          let yesterdayHour = dayStart;
          let tomorrowHour = dayEnd;

          //上班打卡时间范围1
          let signStartRangeArray = [];
          //计算式开始时间前4个小时的时间
          yesterdayHour = this.toYesterdayHour(this.workTime[i].start)
          //计算开始的时间
          if (this.workTime[i].start + ":00" !== dayStart) {
            if (i > 0 && this.toDateTime(this.workTime[i].start) > this.toDateTime(this.workTime[i - 1].end)) {
              lStart_1 = this.calculateTime(this.workTime[i - 1].end, +1);
            } else if (!this.calculateYesterday(this.workTime[i].start)) {
              lStart_1 = yesterdayHour;
            } else {
              lStart_1 = dayStart;
            }
            lStart_2 = this.calculateTime(this.workTime[i].start, -1);
            signStartRangeArray.push(lStart_1 + " - " + lStart_2);
          }
          //计算第二段时间
          if (this.calculateYesterday(this.workTime[i].start)) {
            let lStart_1_2 = yesterdayHour;
            let lStart_2_2 = dayEnd;

            if (i > 0 && this.toDateTime(this.workTime[i - 1].end >= this.toDateTime(lStart_1_2))) {
              lStart_1_2 = this.calculateTime(this.workTime[i - 1].end, +1);
            }
            signStartRangeArray.push(lStart_1_2 + " - " + lStart_2_2);
          }
          this.workTime[i].sign_startime_range = signStartRangeArray;

          // console.log("i--" + i + "-sign_startime_range ", this.workTime[i].sign_startime_range)
          // console.log("--------------------------------------")

          ///////////*****************-----------------------------***************************** */
          //上班打卡时间范围2
          let signEndRangeArray = [];
          tomorrowHour = this.toTomorrowHour(this.workTime[i].start)
          lEnd_1 = this.calculateTime(this.workTime[i].start, +1);
          lEnd_2 = dayEnd;
          if (this.workTime[i].start + ":59" != dayEnd) {
            lEnd_2 = dayEnd;
            if (this.toDateTime(this.workTime[i].start) < this.toDateTime(this.workTime[i].end)) {
              lEnd_2 = this.calculateTime(this.workTime[i].end, -1);
            }
            if (!this.calculateTomorrow(this.workTime[i].start) && this.toDateTime(tomorrowHour) < this.toDateTime(
                lEnd_2)) {
              lEnd_2 = tomorrowHour;
            }

            signEndRangeArray.push(lEnd_1 + " - " + lEnd_2);
          }
          if (this.calculateTomorrow(this.workTime[i].start) && this.toDateTime(this.workTime[i].start) > this
            .toDateTime(this.workTime[i].end)) {
            let lEnd_2_1 = dayStart;
            let lEnd_2_2 = tomorrowHour;
            if (this.toDateTime(tomorrowHour) >= this.toDateTime(this.workTime[i].end)) {
              lEnd_2_2 = this.calculateTime(this.workTime[i].end, -1);
            }
            signEndRangeArray.push(lEnd_2_1 + " - " + lEnd_2_2);

          }

          this.workTime[i].sign_endtime_range = signEndRangeArray;

          // console.log("i--" + i + "-sign_endtime_range ", this.workTime[i].sign_endtime_range)
          // console.log("--------------------------------------")
          //////↑↑↑第一个格子/////////我是一条分割线/////////第二个格子↓↓↓///////////////

          //下班打卡时间范围1
          let outsignStartRangeArray = [];
          yesterdayHour = this.toYesterdayHour(this.workTime[i].end);
          if (this.workTime[i].end + ":00" !== dayStart) {
            if (this.toDateTime(this.workTime[i].start) >= this.toDateTime(this.workTime[i].end)) {
              if (this.calculateYesterday(this.workTime[i].end)) {
                lStart_1 = dayStart;
              } else {
                lStart_1 = yesterdayHour;
              }
            } else {
              lStart_1 = this.calculateTime(this.workTime[i].start, +1);
              if (this.toDateTime(yesterdayHour) > this.toDateTime(this.workTime[i].start)) {
                lStart_1 = yesterdayHour;
              }
            }
            lStart_2 = this.calculateTime(this.workTime[i].end, -1);

            outsignStartRangeArray.push(lStart_1 + " - " + lStart_2);
          }

          if (this.calculateYesterday(this.workTime[i].end)) {
            let lStart_1_2 = yesterdayHour;
            let lStart_2_2 = dayEnd;
            if (this.toDateTime(this.workTime[i].start) >= this.toDateTime(yesterdayHour)) {
              lStart_1_2 = this.calculateTime(this.workTime[i].start, +1);
            }
            outsignStartRangeArray.push(lStart_1_2 + " - " + lStart_2_2)
          }
          this.workTime[i].outsign_startime_range = outsignStartRangeArray;


          // console.log("i--" + i + "-outsign_startime_range ", time.outsign_startime_range)
          // console.log("--------------------------------------")

          //下班打卡时间范围2
          let outsignEndRangeArray = [];
          tomorrowHour = this.toTomorrowHour(this.workTime[i].end)
          lEnd_1 = this.calculateTime(this.workTime[i].end, +1);
          lEnd_2 = dayEnd;
          if (this.workTime[i].end + ":59" != dayEnd) {
            lEnd_2 = dayEnd;
            if (i < workTimeCount - 1 && this.toDateTime(this.workTime[i].end) < this.toDateTime(this.workTime[i + 1]
                .start)) {
              lEnd_2 = this.calculateTime(this.workTime[i + 1].start, -1);
            }
            if (!this.calculateTomorrow(this.workTime[i].end) && this.toDateTime(tomorrowHour) < this.toDateTime(
                lEnd_2)) {
              lEnd_2 = tomorrowHour;
            }
            // } else {
            //   if (!this.calculateTomorrow(this.workTime[i].end) && this.toDateTime(tomorrowHour) < this.toDateTime(
            //       lEnd_2)) {
            //     lEnd_2 = tomorrowHour;
            //   }
            // }
            outsignEndRangeArray.push(lEnd_1 + " - " + lEnd_2);
          }
          if (this.calculateTomorrow(this.workTime[i].end) && (i >= workTimeCount - 1 || this.toDateTime(this.workTime[
              i].end) > this.toDateTime(this.workTime[i + 1].start))) {
            let lEnd_2_1 = dayStart;
            let lEnd_2_2 = tomorrowHour;
            if (i < workTimeCount - 1 && this.toDateTime(tomorrowHour) >= this.toDateTime(this.workTime[i + 1].start)) {
              lEnd_2_2 = this.calculateTime(this.workTime[i + 1].start, -1);
            }
            outsignEndRangeArray.push(lEnd_2_1 + " - " + lEnd_2_2);

          }

          this.workTime[i].outsign_endtime_range = outsignEndRangeArray;


          // console.log("i--" + i + "-outsign_endtime_range ", time.outsign_endtime_range)
          // console.log("--------------------------------------")

        }
      },
      changeRange(event, index, type) {
        if (type == "sign_start") {
          if (this.calculateYesterday(this.workTime[index].start)) {
            let yesterdayHour = this.toYesterdayHour(this.workTime[index].start);
            let a = this.toDateTime(yesterdayHour);
            let b = this.toDateTime(this.workTime[index].sign_startime);
            let c = this.toDateTime("23:59");
            if (a <= b && b <= c) {
              if (this.workTime[index].sign_day_status == 0) {
                this.workTime[index].sign_start_range_day_starus = 2;
              } else {
                this.workTime[index].sign_start_range_day_starus = 0;
              }
            } else {
              this.workTime[index].sign_start_range_day_starus = this.workTime[index].sign_day_status;
            }
          }
        } else if (type == "sign_end") {
          if (this.calculateTomorrow(this.workTime[index].start)) {
            let tomorrowHour = this.toTomorrowHour(this.workTime[index].start);
            let a = this.toDateTime("00:00");
            let b = this.toDateTime(this.workTime[index].sign_endtime);
            let c = this.toDateTime(tomorrowHour);
            if (a <= b && b <= c) {
              if (this.workTime[index].sign_day_status == 0) {
                this.workTime[index].sign_end_range_day_starus = 1;
              } else {
                this.workTime[index].sign_end_range_day_starus = 3;
              }
            } else {
              this.workTime[index].sign_end_range_day_starus = this.workTime[index].sign_day_status;
            }
          }
        } else if (type == "outsign_start") {
          if (this.calculateYesterday(this.workTime[index].end)) {
            let yesterdayHour = this.toYesterdayHour(this.workTime[index].end);
            let a = this.toDateTime(yesterdayHour);
            let b = this.toDateTime(this.workTime[index].outsign_startime);
            let c = this.toDateTime("23:59");
            if (a <= b && b <= c) {
              if (this.workTime[index].outsign_day_status == 0) {
                this.workTime[index].outsign_start_range_day_starus = 2;
              } else {
                this.workTime[index].outsign_start_range_day_starus = 0;
              }
            } else {
              this.workTime[index].outsign_start_range_day_starus = this.workTime[index].outsign_day_status;
            }
          }
        } else if (type == "outsign_end") {
          if (this.calculateTomorrow(this.workTime[index].end)) {
            let tomorrowHour = this.toTomorrowHour(this.workTime[index].end);
            let a = this.toDateTime("00:00");
            let b = this.toDateTime(this.workTime[index].outsign_endtime);
            let c = this.toDateTime(tomorrowHour);
            if (a <= b && b <= c) {
              if (this.workTime[index].outsign_day_status == 0) {
                this.workTime[index].outsign_end_range_day_starus = 1;
              } else {
                this.workTime[index].outsign_end_range_day_starus = 3;
              }
            } else {
              this.workTime[index].outsign_end_range_day_starus = this.workTime[index].outsign_day_status;
            }
          }
        }
      },
      /**
       *把选择的时分时间换算成当日的date对象
       */
      toDate(time) {
        let now = new Date();
        let ymd = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + " " + time + ":00";
        return new Date(ymd);
      },
      /**
       * 把date对象换算成时间戳
       */
      toDateTime(time) {
        return Number(this.toDate(time).getTime());
      },
      /**
       *计算上一分钟or下一分钟
       */
      calculateTime(time, val) {
        let lTime = this.toDate(time);
        lTime.setMinutes(lTime.getMinutes() + val);

        let Hms = lTime.getHours() + ":" + lTime.getMinutes() + ":" + lTime.getSeconds();

        return Hms;
      },
      /**
       *获取减去dayRange之后的时分秒时间
       */
      toYesterdayHour(time, dayRange = 4) {
        let lTime = this.toDate(time);
        lTime.setHours(lTime.getHours() - dayRange);
        let Hms = lTime.getHours() + ":" + lTime.getMinutes() + ":" + lTime.getSeconds();
        return Hms;
      },
      /**
       *判断选择的时间减去dayRange是否是昨天的时间
       */
      calculateYesterday(time, dayRange = 4) {
        let nowStart = this.toDate("00:00:00");
        let selectTime = this.toDate(time);
        selectTime.setHours(selectTime.getHours() - dayRange);
        return nowStart.getDay() > selectTime.getDay() ? true : false;
      },

      /**
       *获取减去dayRange之后的时分秒时间
       */
      toTomorrowHour(time, dayRange = 4) {
        let lTime = this.toDate(time);
        lTime.setHours(lTime.getHours() + dayRange);
        let Hms = lTime.getHours() + ":" + lTime.getMinutes() + ":" + lTime.getSeconds();
        return Hms;
      },

      /**
       *判断选择的时间减去dayRange是否是明天的时间
       */
      calculateTomorrow(time, dayRange = 4) {
        let nowStart = this.toDate("23:59:59");
        let selectTime = this.toDate(time);
        selectTime.setHours(selectTime.getHours() + dayRange);
        return nowStart.getDay() < selectTime.getDay() ? true : false;
      },

      send(events) {
        let _this = this;
        let formData = {
          workTime: _this.workTime,
        }
        _this.axios.post('v1/admin/payroll/test', formData)
          .then(function (res) {
            console.log(res);

          }).catch(function (res) {
            console.log(res)
          })
      },

    }
  };

</script>

<style>
  .mm {
    margin-left: 32px;
    margin-top: 32px;
  }

  .mm2 {
    color: coral;
    margin-left: 32px;
    margin-top: 32px;
  }

  .day1 {
    color: coral;
    margin-left: 16px;
    margin-top: 16px;
  }

  .day2 {
    margin-left: 16px;
    margin-top: 16px;
  }

  .mb {
    margin-top: 32px;
  }

</style>
